<template>
    <div>
        <mt-navbar v-model="selected">
            <mt-tab-item id='1'>商品介绍</mt-tab-item>
            <mt-tab-item id='2'>规格参数</mt-tab-item>
            <mt-tab-item id='3'>售后保障</mt-tab-item>
        </mt-navbar>

        <!-- tab-container -->
            <mt-tab-container v-model="selected">
            <mt-tab-container-item id="1" class="goodsinfo">
                <img v-for="item in infoList" :key="item.id" :src="item.img">
            </mt-tab-container-item>
            <mt-tab-container-item id="2">
                <img v-for="item in paramList" :key="item.id" :src="item.img">
            </mt-tab-container-item>
            <mt-tab-container-item id="3" class="detServer">
                <p v-for="item in detList" :key="item.id">{{item.txt}}</p>
            </mt-tab-container-item>
        </mt-tab-container>
        <div class="goodsinfo">
            
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            selected: '1',
            infoList: [{
                id: 1,
                img: './static/images/goodsInfo.jpg'
            },{
                id: 2,
                img: './static/images/goodsInfo2.jpg',
            }],
            paramList: [{
                id: 1,
                img: './static/images/goodsInfo1.jpg'
            }],
            detList: [{
                id: 1,
                txt: '本产品全国联保，享受三包服务，质保期为：一年质保'
            },{
                id: 2,
                txt: '如因质量问题或故障，凭厂商维修中心或特约维修点的质量检测证明，享受7日内退货，15日内换货，15日以上在质保期内享受免费保修等三包服务！'
            }, {
                id: 3,
                txt: '(注:如厂家在商品介绍中有售后保障的说明,则此商品按照厂家说明执行售后保障服务。)您可以查询本品牌在各地售后服务中心的联系方式，请点击这儿查询......'
            }, {
                id: 4,
                txt: '售后服务电话：400-830-8300'
            }, {
                id: 5,
                txt: '品牌官方网站：http://www.huawei.com/cn'
            }]
        }
    }
}
</script>

<style scoped>
    /* 选项卡 */
    .mint-navbar {
        margin-bottom: 3px;
    }
    /* 全部图片撑开 */
    img {
        width: 100%;
    }
    /* 售后保障 */
    .detServer {
        padding: 10px;
    }
    .detServer p {
        color: #666;
        font-size: 12px;
    }
</style>